<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta文档*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>接口列表</title>

    <!-- Bootstrap -->
    <link href="/common/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/code/css/style.css">
    <link href="/v2/css/api-css.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="/common/bootstrap/js/html5shiv.min.js"></script>
    <script src="/common/bootstrap/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="border: none;border-bottom: 1px solid #ddd;">
    <div class="clearfix" style="margin: 0 1%;">
        <div class="navbar-header">
            <a class="navbar-brand" style="padding-left: 0;"><span class="glyphicon glyphicon-link text-primary"
                                                                   aria-hidden="true"></span> FylApi</a>
        </div>
        <div class="navbar-form pull-left">
            <a href="${dn}/v2/u/select/project" class="btn btn-default"><span class="glyphicon glyphicon-pushpin"
                                                                              aria-hidden="true"></span> ${(sp.name)!"切换项目"}
            </a>
        </div>
        <#if isLogin>
        <div class="navbar-btn pull-right">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> ${loginUser.loginName}
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                <#--<li><a href="#">设置</a></li>
                <li><a href="#">改密</a></li>
                <li role="separator" class="divider"></li>-->
                    <li><a href="${dn}/v2/u/exit"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
                        退出</a></li>
                </ul>
            </div>
        </div>
            <#if isLogin && loginUser.type=='WRITE'>
        <div class="navbar-form pull-right">
            <button type="button" class="btn btn-success" onclick="addWindow()"><span class="glyphicon glyphicon-plus"
                                                                                      aria-hidden="true"></span> 接口
            </button>
        </div>
        <div class="navbar-btn pull-right">
            <button type="button" class="btn btn-primary" onclick="addProjectWindow()"><span
                    class="glyphicon glyphicon-plus"
                    aria-hidden="true"></span> 项目
            </button>
        </div>
            </#if>
        <#else>
        <div class="navbar-btn pull-right">
            <a href="${dn}/v2/login" class="btn btn-success"><span class="glyphicon glyphicon-send"
                                                                   aria-hidden="true"></span> 登录</a>
        </div>
        </#if>
    </div>
</nav>
<#--头部结束-->
<#--内容区开始-->
<div class="content-right">
    <ul>
        <#list list as d>
            <li>
                <a href="#api${d.id}" class="clearfix">
                    <div class="pull-left"><span class="glyphicon glyphicon-link text-primary"
                                                 aria-hidden="true"></span>&nbsp;${d.name}</div>
                    <div class="pull-right" id="yesOk${d.id}">
                        <#if d.apiStatus=='YESOK'>
                            <span class="glyphicon glyphicon-ok text-primary" aria-hidden="true"></span>
                        </#if>
                    </div>
                </a>
            </li>
        </#list>
    </ul>
</div>
<div class="content-left">
    <#list list as d>
        <div class="panel panel-default" style="margin: 0 0 30px 0;border:none;box-shadow:none;" id="api${d.id}">
            <div class="panel-heading">
                <div class="clearfix">
                    <h3 class="panel-title pull-left">
                        <span class="glyphicon glyphicon-link text-primary" aria-hidden="true"></span> <span
                            id="name${d.id}">${d.name}</span>
                    </h3>
                    <p style="margin: 0" class="pull-right">
                        作者：<span style="cursor:pointer;" data-toggle="tooltip" data-placement="left"
                                 title="有问题请联系我">${d.author!"无名氏"}</span>
                    </p>
                </div>
            </div>
            <div class="panel-body">
                <div class="clearfix" style="margin-bottom: 15px;">
                    <div class="pull-right">
                        <#if isLogin && loginUser.type=='READ'>
                        <button type="button" onclick="yesOk(${d.id})" class="btn btn-success btn-xs">完成</button>
                        </#if>
        <#if isLogin>
            <#if d.apiStatus=='YESNO'>
                        <button type="button" onclick="yesOk(${d.id},'YESOK',this)" class="btn btn-success btn-xs">完成
                        </button>
            </#if>
            <#if d.apiStatus=='YESOK'>
                        <button type="button" onclick="yesNo(${d.id},'YESNO',this)" class="btn btn-warning btn-xs">取消
                        </button>
            </#if>
        </#if>
                        <#if isLogin && loginUser.id==d.userId>
                        <button type="button" onclick="setUpdateData(${d.id})" class="btn btn-primary btn-xs">修改
                        </button>
                        <button type="button" onclick="del(${d.id})" class="btn btn-danger btn-xs">删除</button>
                        </#if>
                    </div>
                </div>
                <div class="row row-1" style="margin-bottom: 30px;">
                    <div class="col-md-2">
                        <p class="text-primary" style="text-align: center;">
                            <strong>链接</strong>
                        </p>
                    </div>
                    <div class="col-md-10">
                        <p style="margin: 0;" id="url${d.id}">${d.url!}</p>
                    </div>
                </div>
                <div class="row row-2" style="margin-bottom: 30px;">
                    <div class="col-md-2">
                        <p class="text-primary" style="text-align: center;">
                            <strong>请求</strong>
                        </p>
                    </div>
                    <div class="col-md-10">
                        <input type="hidden" id="method${d.id}" value="${d.method}">
                        <p style="margin: 0;">
                            <#if d.method=='NONE'>
                                无限制
                            <#else>
                                ${d.method!}
                            </#if>
                        </p>
                    </div>
                </div>
                <div class="row row-3" style="margin-bottom: 30px;">
                    <div class="col-md-2">
                        <p class="text-primary" style="text-align: center;">
                            <strong>入参</strong>
                        </p>
                    </div>
                    <div class="col-md-10">
                        <textarea id="enterParam${d.id}" style="display: none;">${d.enterParam!}</textarea>
    <#if d.enterParamList??>
        <div class="row">
            <div class="col-md-2">
                <p style="margin-bottom: 20px"><strong>参数</strong></p>
            </div>
            <div class="col-md-2">
                <p style="margin-bottom: 20px"><strong>类型</strong></p>
            </div>
            <div class="col-md-8">
                <p style="margin-bottom: 20px"><strong>说明</strong></p>
            </div>
        </div>
        <#list d.enterParamList as p>
                        <div class="row">
                            <#if (p.name?? && p.type?? && p.desc??)||(p.name?? && p.type??)>
                                <div class="col-md-2">
                                    <p style="margin-bottom: 20px">${p.name!}</p>
                                </div>
                                <div class="col-md-2">
                                    <p style="margin-bottom: 20px">${p.type!}</p>
                                </div>
                                <div class="col-md-8">
                                    <p style="margin-bottom: 20px">${p.desc!}</p>
                                </div>
                            <#else>
                                <div class="col-md-12">
                                    <p style="margin-bottom: 20px">${p.name!}</p>
                                </div>
                            </#if>
                        </div>
        </#list>
    <#else>
                        <div class="row">
                            <div class="col-md-12">
                                <p style="margin-bottom: 20px">无</p>
                            </div>
                        </div>
    </#if>
                    </div>
                </div>
                <div class="row row-4" style="margin-bottom: 30px;">
                    <div class="col-md-2">
                        <p class="text-primary" style="text-align: center;">
                            <strong>出参</strong></p>
                    </div>
                    <div class="col-md-10">
                        <textarea id="outParam${d.id}" style="display: none;">${d.outParam!}</textarea>
    <#if d.outParamList??>
        <div class="row">
            <div class="col-md-2">
                <p style="margin-bottom: 20px"><strong>参数</strong></p>
            </div>
            <div class="col-md-2">
                <p style="margin-bottom: 20px"><strong>类型</strong></p>
            </div>
            <div class="col-md-8">
                <p style="margin-bottom: 20px"><strong>说明</strong></p>
            </div>
        </div>
        <#list d.outParamList as p>
                        <div class="row">
                            <#if (p.name?? && p.type?? && p.desc??)||(p.name?? && p.type??)>
                                <div class="col-md-2">
                                    <p style="margin-bottom: 20px">${p.name!}</p>
                                </div>
                                <div class="col-md-2">
                                    <p style="margin-bottom: 20px">${p.type!}</p>
                                </div>
                                <div class="col-md-8">
                                    <p style="margin-bottom: 20px">${p.desc!}</p>
                                </div>
                            <#else>
                                <div class="col-md-12">
                                    <p style="margin-bottom: 20px">${p.name!}</p>
                                </div>
                            </#if>
                        </div>
        </#list>
    <#else>
                        <div class="row">
                            <div class="col-md-12">
                                <p style="margin-bottom: 20px">无</p>
                            </div>
                        </div>
    </#if>
                    </div>
                </div>
                <div class="row row-5" style="margin-bottom: 30px;">
                    <div class="col-md-2">
                        <p class="text-primary" style="text-align: center;">
                            <strong>备注</strong></p>
                    </div>
                    <div class="col-md-10">
                        <textarea id="remarks${d.id}" style="display: none;">${d.remarks!}</textarea>
    <#if d.remarksList??>
        <#list d.remarksList as p>
                        <div class="row">
                            <div class="col-md-12">
                                <p style="margin-bottom: 20px">${p!}</p>
                            </div>
                        </div>
        </#list>
    <#else>
                        <div class="row">
                            <div class="col-md-12">
                                <p style="margin: 0;">无</p>
                            </div>
                        </div>
    </#if>
                    </div>
                </div>
            </div>
        </div>
    <#else>
        <p class="text-center" style="margin-bottom: 30px;">暂无数据</p>
    </#list>
</div>
<#--内容区结束-->
<#--底部开始-->
<div class="footer">
    <p class="text-center" style="margin-bottom: 20px;">Copyright © 2021 Fyl. All rights
        reserved.</p>
</div>
<#--底部结束-->
<#if isLogin && loginUser.type=='WRITE'>

<#--添加接口表单开始-->
<div class="panel-body" id="add-window" style="display: none;">
    <form action="${dn}/v2/u/api/ajax/add" id="apiForm">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="名称"
                   autocomplete="off">
        </div>
        <div class="form-group">
            <label for="url">链接</label>
            <input type="text" class="form-control" name="url" id="url" placeholder="链接" autocomplete="off">
        </div>
        <div class="form-group">
            <label>请求</label>
            <div>
                <label class="radio-inline">
                    <input type="radio" name="method" id="post" value="NONE" checked> 无限制
                </label>
                <label class="radio-inline">
                    <input type="radio" name="method" id="get" value="GET"> GET
                </label>
                <label class="radio-inline">
                    <input type="radio" name="method" id="post" value="POST"> POST
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="enterParameter">入参（输入格式：参数#类型#说明）</label>
            <textarea class="form-control" rows="5" id="enterParam" name="enterParam"
                      placeholder="参数#类型#说明"></textarea>
        </div>
        <div class="form-group">
            <label for="outParameter">出参（输入格式：参数#类型#说明）</label>
            <textarea class="form-control" rows="5" id="outParam" name="outParam"
                      placeholder="参数#类型#说明"></textarea>
        </div>
        <div>
            <label for="remarks">备注</label>
            <textarea class="form-control" rows="5" id="remarks" name="remarks"></textarea>
        </div>
    </form>
</div>
<#--添加接口表单结束-->
<#--修改接口表单开始-->
<div class="panel-body" id="update-window" style="display: none;">
    <form action="${dn}/v2/u/api/ajax/update" id="updateApiForm">
        <input type="hidden" id="u-id" name="id">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" name="name" id="u-name" placeholder="名称"
                   autocomplete="off">
        </div>
        <div class="form-group">
            <label for="url">链接</label>
            <input type="text" class="form-control" name="url" id="u-url" placeholder="链接"
                   autocomplete="off">
        </div>
        <div class="form-group">
            <label>请求</label>
            <div>
                <label class="radio-inline">
                    <input type="radio" name="method" id="u-none" value="NONE"> 无限制
                </label>
                <label class="radio-inline">
                    <input type="radio" name="method" id="u-get" value="GET"> GET
                </label>
                <label class="radio-inline">
                    <input type="radio" name="method" id="u-post" value="POST"> POST
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="enterParameter">入参（输入格式：参数#类型#说明）</label>
            <textarea class="form-control" rows="5" id="u-enterParam" name="enterParam"></textarea>
        </div>
        <div class="form-group">
            <label for="outParameter">出参（输入格式：参数#类型#说明）</label>
            <textarea class="form-control" rows="5" id="u-outParam" name="outParam"></textarea>
        </div>
        <div>
            <label for="remarks">备注</label>
            <textarea class="form-control" rows="5" id="u-remarks" name="remarks"></textarea>
        </div>
    </form>
</div>
<#--修改接口表单结束-->

<#--添加项目表单开始-->
<div class="panel-body" id="add-project-window" style="display: none;">
    <form action="${dn}/v2/u/project/ajax/add" id="addPorjectForm">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" name="name" id="p-name" placeholder="名称"
                   autocomplete="off">
        </div>
    </form>
</div>
<#--添加项目表单结束-->
<#--修改项目表单开始-->
<div class="panel-body" id="update-project-window" style="display: none;">
    <form action="${dn}/v2/u/project/ajax/update" id="updatePorjectForm">
        <input type="hidden" id="u-p-id" name="id">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" name="name" id="u-p-name" placeholder="名称"
                   autocomplete="off">
        </div>
    </form>
</div>
<#--修改项目表单结束-->

</#if>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/common/bootstrap/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/common/bootstrap/js/bootstrap.min.js"></script>
<script src="/common/layer/layer.js"></script>
<#if isLogin>
<script src="/common/clipboard.min.js"></script>
<script src="/common/jquery.form.js"></script>
</#if>
<script src="/v2/js/common.js"></script>
<script>
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("goTop").style.display = "block";
        } else {
            document.getElementById("goTop").style.display = "none";
        }
    }

    function a(id) {
        var top = $('#api' + id).position().top;
        console.log(top)
        $('.content-left').scrollTop(top);
    }

    // 点击按钮，返回顶部
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
        /*var str = "name#String#姓名\n" +
                "age#int#年龄";
        $("#enterParameter").val(str);
        $("#outParameter").val(str);*/

        $(".api-nav").click(function () {
            var id = $(this).attr("data-id");
            var offset = $("#" + id).offset();
            var dis = offset['top'];
            document.body.scrollTop = dis - 80;
            document.documentElement.scrollTop = dis - 80;
        })
    })
<#if isLogin>
    function add() {
        var options = {
            url: $("#apiForm").attr("action"),
            dataType: "json",
            type: "post",
            success: function (re) {
                if (re.status) {
                    location.reload()
                } else {
                    noAlert(re.msg)
                }
            },
            error: function () {
                noAlert("操作失败")
            }
        };
        //jquery.form使用方式
        $("#apiForm").ajaxSubmit(options);
    }

    function update() {
        var options = {
            url: $("#updateApiForm").attr("action"),
            dataType: "json",
            type: "post",
            success: function (re) {
                if (re.status) {
                    location.reload();
                } else {
                    noAlert(re.msg);
                }
            },
            error: function () {
                noAlert("操作失败")
            }
        };
        //jquery.form使用方式
        $("#updateApiForm").ajaxSubmit(options);
    }

    function setUpdateData(id) {
        clearUpdateData();
        var name = $("#name" + id).text();
        var url = $("#url" + id).text();
        var method = $("#method" + id).val().toLowerCase();
        var enterParam = $("#enterParam" + id).val();
        var outParam = $("#outParam" + id).val();
        var remarks = $("#remarks" + id).val();
        $("#u-id").val(id);
        $("#u-name").val(name);
        $("#u-url").val(url);
        $("#u-" + method).prop("checked", true);
        $("#u-enterParam").val(enterParam);
        $("#u-outParam").val(outParam);
        $("#u-remarks").val(remarks);
        updateWindow();
    }

    function clearUpdateData() {
        $("#u-id").val("");
        $("#u-name").val("");
        $("#u-url").val("");
        $("#u-get").prop("checked", false);
        $("#u-post").prop("checked", false);
        $("#u-enterParam").val("");
        $("#u-outParam").val("");
        $("#remarks").val("");
    }

    function del(id) {
        layer.confirm('删除后无法恢复！', {icon: 3, title: '提示'}, function (index) {
            layer.close(index);
            $.ajax({
                url: "/v2/u/api/ajax/delete",
                type: "post",
                data: {
                    "id": id
                },
                dataType: "json",
                success: function (re) {
                    if (re.status) {
                        location.reload()
                    }
                },
                error: function () {
                    noAlert("操作失败")
                }
            });
        });
    }

    //添加接口
    function addWindow() {
        openWindow('<span class="glyphicon glyphicon-link text-primary" aria-hidden="true"></span> 添加接口', "$('#add-window')", "add()", "60%", "100%", true, false)
    }

    //修改接口
    function updateWindow() {
        openWindow('<span class="glyphicon glyphicon-link text-primary" aria-hidden="true"></span> 修改接口', "$('#update-window')", "update()", "60%", "100%", true, false)
    }

    //添加项目窗口
    function addProjectWindow() {
        openWindow('<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> 添加项目', "$('#add-project-window')", "addProject()", "20%", "auto", false, true);
    }

    //修改项目窗口
    function updateProjectWindow() {
        openWindow('<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> 修改项目', "$('#add-project-window')", "addProject()", "20%", "auto", false, true);
    }

    //完成
    function yesOk(id, apiStatus, em) {
        ajaxJson("${dn}/v2/u/api/ajax/yesOk", {"id": id}, function (re) {
            if (re.status) {
                $("#yesOk" + id).html('<span class="glyphicon glyphicon-ok text-primary" aria-hidden="true"></span>');
                $(em).attr("onclick", "yesNo(" + id + ",'YESNO',this)");
                $(em).text("取消");
                $(em).removeClass("btn-success");
                $(em).addClass("btn-warning");
            }
        })
    }
    //取消
    function yesNo(id, apiStatus, em) {
        ajaxJson("${dn}/v2/u/api/ajax/yesNo", {"id": id}, function (re) {
            if (re.status) {
                $("#yesOk" + id).html("");
                $(em).attr("onclick", "yesOk(" + id + ",'YESOK',this)");
                $(em).text("完成");
                $(em).removeClass("btn-warning");
                $(em).addClass("btn-success");
            }
        })
    }
</#if>
</script>
</body>
</html>